<template>
	<!-- 公共页面详情 -->
	<view class="box">
		<view class="top flex fcenter">
			<u-tabs :list="tabList" @click="tabsChange" lineColor="#00B4C7" lineWidth="8"
				:activeStyle="{color: '#00B4C7'}" :inactiveStyle="{color: '#999'}"></u-tabs>
		</view>
		<view class="contList" v-if="orderList.length">
			<view class="item flex alignC" v-for="(item,index) in orderList" :key="index">
				<image class="item_left" :src="item.image" mode=""></image>
				<view class="item_right flex">
					<view class="item_right_top">
						<text class="item_name">{{ item.name }}</text>
						<text>{{ item.professionalTitle+'·'+item.department }}</text>
					</view>
					<view class="item_right_bot">
						<text class="item_tag" v-if="item.level">{{ item.level }}</text>
						<text>{{ item.hospital }}</text>
					</view>
				</view>
			</view>

		</view>
		<view v-else class="empty_box" style="margin: 200rpx 0 0;">
			<image src="/static/img/empty.png" mode=""></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import{
		findDoctorByTypeApi
	}from '../../common/API/doctorApi.js'
	export default {
		data() {
			return {
				tabList: [{
					id: 1,
					name: '师傅列表'
				},{
					id: 2,
					name: '徒弟列表'
				}],
				tabCurrent: 1,
				orderList: [{id: 1}],
				total: 0,
				pageNum: 1,
				pageSize: 10,
				//判断是否请求完毕数据
				isBottom: false,
				//底部文字
				bottomText: '加载中...',
			}
		},
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		async onLoad(options) {
			this.listInit()
			if(this.ylUserInfo.type == '0'){
				this.tabList.pop()
			}
		},
		async onPullDownRefresh() {
			this.listInit()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			listInit() {
				this.pageNum = 1
				this.orderList = []
				this.isBottom = false
				this.bottomText = '加载中...'
				this.getList()
			},
			// tabs通知swiper切换
			tabsChange(val) {
				this.tabCurrent = val.id;
				this.listInit()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (!this.isBottom) {
					this.pageNum += 1
					this.getList()
				}
			},
			// 分页查询订单
			async getList() {
				// const res = await findDoctorByTypeApi({
				// 	"pageNum": this.pageNum,
				// 	"pageSize": this.pageSize,
				// 	"status": this.status,
				// 	"userCode": this.ylUserInfo.username
				// })
				const res = await findDoctorByTypeApi(this.tabCurrent)
				if (res.status == 200) {
					this.orderList = res.data == null?[]:res.data
					
					// this.total = res.data.total
				}
				// if (this.orderList.length >= this.total) {
				// 	this.isBottom = true
				// 	this.bottomText = '没有更多数据了~'
				// }
			},
		}
	}
</script>

<style scoped lang="scss">
	.box {
		.top {
			background: #fff;
			height: 120rpx;
			/deep/ .u-tabs__wrapper__nav__item{
				padding: 0 50rpx;
			}
		}
		.contList{
			width: 92%;
			margin: 0 auto;
			.item{
				font-size: 28rpx;
				background: #fff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-top: 30rpx;
				.item_left{
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}
				.item_right{
					margin-left: 20rpx;
					flex-direction: column;
					.item_name{
						font-size: 34rpx;
						margin-right: 20rpx;
					}
					.item_right_bot{
						margin-top: 20rpx;
						.item_tag{
							margin-right: 20rpx;
							background: #00B4C7;
							color: #fff;
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 2rpx 10rpx;
						}
					}
					
				}
			}
		}
	}
</style>